<html>
<head>
    <script type="text/javascript" language="javascript" src="/global/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="/global/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        //Global variables
        var otable;
        var dataTab;
        $(document).ready(function () {
            chargeData();
            $('#btnSubmit').click(function () {
                insertData();
            });
        });

        // 1. charge all data
        function chargeData() {
            $.ajax({
                type: "POST",
                //create a method for search the data and show in datatable
                url: "/servlets/service/competitions/",
                contentType: "application/json; charset=utf-8",
                data: '{ }',
                dataType: "json",
                success: AjaxGetFieldDataSucceeded,
                error: AjaxGetFieldDataFailed
            });
        }

        function AjaxGetFieldDataSucceeded(result) {
            if (result != "[]") {

                dataTab = $.parseJSON(result);
                //instance of datatable
                oTable = $('#example').dataTable({
                    "bProcessing": true,
                    "aaData": dataTab,
                    //important  -- headers of the json
                    "aoColumns": [{ "mDataProp": "season" }, { "mDataProp": "type" }],
                    "sPaginationType": "full_numbers",
                    "aaSorting": [[0, "asc"]],
                    "bJQueryUI": true,

                });

            }
        }

        function AjaxGetFieldDataFailed(result) {
            alert(result.status + ' ' + result.statusText);
        }

        // 2. this function only insert the data in your database
        function insertData() {
            var email = $("#season").val();
            var evento = $("#type").val();
            $.ajax({
                type: "POST",
                //in this method insert the data in your database
                url: "/servlets/service/competitions/",
                contentType: "application/json; charset=utf-8",
                data: '{ season : "' + season + '", type : "' + type + '"}',
                dataType: "json",
                success: AjaxUpdateDataSucceeded,
                error: AjaxUpdateDataFailed
            });
        }

        function AjaxUpdateDataSucceeded(result) {
            if (result != "[]") {
                alert("update ok");
                refreshDatatable();
            }
        }

        function AjaxUpdateDataFailed(result) {
            alert(result.status + ' ' + result.statusText);
        }

        // 3. This function refresh only the datatable not all page  in varius events you can call like INSERT,UPDATE,DELETE ;D
        function refreshDatatable() {
            $.ajax({
                type: "POST",
                //same event used in chargeData function
                url: "/servlets/service/competitions/",
                contentType: "application/json; charset=utf-8",
                data: '{ }',
                dataType: "json",
                success: AjaxRefreshDataSucceeded,
                error: AjaxRefreshDataFailed
            });
        }

        function AjaxRefreshDataSucceeded(result) {
            if (result.d != "[]") {
                var jposts = result;
                dataTab = $.parseJSON(jposts);
                //when the instance of datatable exists, only pass the data :D
                oTable.fnClearTable();
                oTable.fnAddData(dataTab);
            }
        }

        function AjaxRefreshDataFailed(result) {
            alert(result.status + ' ' + result.statusText);
        }

        <script>
                </head>
                <body>
        <form name="myform" id="myform" action="">
                <label for="season">Season:</label>
        <input type="text" name="season" id="season" value=""/> <br />
                <label for="type">Type:</label>
        <input type="text" name="type" id="type" value=""/> <br/>
                <input type="button" id="btnSubmit" name="btnSubmit" value="Search">
                </form>

                <table class="display" id="example">
                <thead>
                <tr>
                <th>SEASON</th>
                <th>TYPE</th>
                </tr>
                </thead>
                <tbody>
            <!-- data goes here -->
                </tbody>
                </table>
                </body>
                </html>